<template>
	<view class="container">
		<view>
			<myp-tabbar ref="tabbar" :tabs="tabs" :tabStyle="tabStyle" @tabClicked="tabbarSwitched">
				<chat></chat>
				<chatList></chatList>
				<discover></discover>
				<mine></mine>
			</myp-tabbar>
		</view>
	</view>
</template>

<script>
	import toastMixin from '@/mypUI/myp-mixin/toastMixin.js'
	import loadingMixin from '@/mypUI/myp-mixin/loadingMixin.js'
	import mine from './mine/mine.vue'
	import chat from './chat/chat.vue'
	import chatList from './chatList/chatList.vue'
	import discover from './discover/discover.vue'
	export default {
		components: {
			mine,chat,chatList,discover
		},
		mixins: [toastMixin, loadingMixin],
		data() {
			return {
				currentPage: 0,
				tabs: [
					{
						selectedIcon: '/static/img/tabbar/chat.png',
						icon: '/static/img/tabbar/chat.png',
						title: '聊天',
						selectedTitle: '聊天',
					},
					{
						selectedIcon: '/static/img/tabbar/chatList.png',
						icon: '/static/img/tabbar/chatList.png',
						title: '通信录',
						selectedTitle: '通信录',
					},
					{
						selectedIcon: '/static/img/tabbar/discover.png',
						icon: '/static/img/tabbar/discover.png',
						title: '发现',
						selectedTitle: '发现',
					},
					{	
						selectedIcon: '/static/img/tabbar/mine.png',
						icon: '/static/img/tabbar/mine.png',
						title: '个人',
						selectedTitle: '个人',
					}

				],
				tabStyle: {
								iconStyle: 'width:22px;height:22px;',
								selectedIconStyle: 'width:22px;height:22px;',
								titleStyle: 'font-size:12px;color:#999999;',
								selectedTitleStyle: 'font-size:12px;color:#03c700;',
								boxStyle: 'border-top-width:0.5px;border-top-color:#DDDDDD;border-top-style:solid;'
							},

			};
		},
		methods: {
			tabbarSwitched(val) {
				this.currentPage = val.page;
				},
		}
	}
</script>

<style lang="scss">
	.container{
	}
</style>
